<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">

        <div id="example">
            <p>Original message: "{{ message }}"</p>
            <p>Computed reversed message: "{{ fullName }}"</p>
            <!-- computed （无括号，是计算属性，有缓存） -->

            <!-- 只在相关响应式依赖发生改变时它们才会重新求值。
                这就意味着只要 message 还没有发生改变，
                多次访问 reversedMessage 计算属性会立即返回之前的计算结果，
                而不必再次执行函数。 -->

                <!-- 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。 -->

            <p>Reversed message: "{{ reversedMessageMet() }}"</p>
            <!-- methods （有括号，是方法，无缓存） -->
        </div>


    </div>

    <script src="vue.js"></script>
</body>
</html>